<template>
  <Table
    ref="tableRef"
    :url="URL_QUERYCHARGECARDLIST"
    :columns="data.columns"
    :handles="data.handles"
    :toolbar="data.toolbar"
    :query="data.query"
    listKey="list"
  ></Table>
</template>

<script lang="ts" setup name="chargeCardList">
import Table from '@/components/table/index.vue';
import {
  URL_QUERYCHARGECARDLIST,
  canCelChargeCard,
  URL_EMPSTOREIMPORT,
  EXPORT_CHARGECARD,
} from '@/service/apis/pile';
import { queryDicByParent } from '@/service/apis/api';
import { exportFile } from '@/utils/utils';

const router = useRouter();

const tableRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  emit('get-update', (flag: boolean) => {
    if (flag) {
      tableRef.value?.getData();
    }
  });
});

let data = reactive({
  columns: [
    {
      prop: 'cardNum',
      label: '卡面卡号',
    },
    {
      prop: 'physicalNum',
      label: '芯片码',
    },
    {
      prop: 'status',
      label: '充电卡状态',
      dic: [] as any,
    },
    {
      prop: 'accountNumber',
      label: '绑定用户',
    },
    {
      prop: 'updateTime',
      label: '修改时间',
    },
  ],
  handles: [
    {
      label: '修改',
      permission: 'chargeCardList.edit',
      handle: (row: any) => {
        console.log('编辑---', row);
        router.push({
          name: 'chargeCardEdit',
          query: row,
        });
      },
    },
    {
      label: '作废',
      permission: 'chargeCardList.use',
      labelFun: (row: any) => {
        return row.status !== '3' ? '作废' : '恢复';
      },
      colorFun: (row: any) => {
        return row.status !== '3' ? '#FA3939' : '#01C68B';
      },
      handle: (row: any) => {
        const msg =
          row.status !== '3'
            ? '作废后的卡将不支持刷卡充电，确认执行本操作？'
            : '卡恢复后，可正常使用，确认执行本操作？';
        ElMessageBox.confirm(msg, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          canCelChargeCard({
            id: row.id,
            status: row.status !== '3' ? '3' : '0',
          }).then((res: any) => {
            if (res) {
              row.status = res.status;
            }
          });
        });
      },
    },
  ],
  toolbar: [
    {
      label: '模板下载',
      permission: 'chargeCardList.import',
      icon: 'icon-download',
      type: 'primary',
      plain: true,
      url: '%E5%85%85%E7%94%B5%E5%8D%A1%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx',
    },
    {
      label: '批量导入',
      permission: 'chargeCardList.import',
      icon: 'icon-import',
      type: 'primary',
      plain: true,
      import: true,
      url: URL_EMPSTOREIMPORT,
    },
    {
      label: '导出',
      permission: 'chargeCardList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        console.log('导出---', row);
        exportFile(EXPORT_CHARGECARD, '充电卡列表', tableRef.value?.getForm());
      },
    },
  ],
  query: [
    {
      label: '卡面卡号',
      prop: 'cardNum',
      comName: 'input',
      props: {
        placeholder: '请输入卡面卡号',
      },
    },
    {
      label: '芯片码',
      prop: 'physicalNum',
      comName: 'input',
      props: {
        placeholder: '请输入芯片码',
      },
    },
    {
      label: '充电卡状态',
      prop: 'status',
      comName: 'select',
      props: {
        placeholder: '请选择充电卡状态',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
    {
      label: '绑定用户',
      prop: 'accountNumber',
      comName: 'input',
      props: {
        placeholder: '请输入绑定用户',
      },
    },
  ],
});

queryDicByParent({ listDtos: ['cardStatus'] }).then((res: any) => {
  console.log('ddd--', res.cardStatus);
  data.columns[2].dic = [...res.cardStatus];
  data.query[2].props.options = [...res.cardStatus];
});
</script>